<template>
  <div class="nav_first">
<!--    分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。-->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             background-color="transparent"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="1" @click="goToIndex">进入后台</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" @click="goToBuy">进入购买</el-menu-item>
      <el-menu-item index="4"><!--<a href="/loginFirst" target="_blank">订单管理</a>-->消息中心</el-menu-item>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    goToBuy() {
        this.$toRoute(this,'/product/productStopList', '进入购买')
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    goToIndex() {
      this.$router.push({
        path: '/index'
      })
    }
  }
}
</script>

<style scoped>
.nav_first {
  position: absolute;
  width: 420px;
  /*height: 10px;*/
  top: 0px;
  right: 200px;
  /*background-color: #ffd04b;*/
}
.el-menu-demo {
  border: none;
}
</style>
